<script lang="ts" setup>
import type { Button01Item } from '@/api/designer/model'
import type { OpenCallbackMeta } from '@/components/JumpLinkModal/type'
import AddButton from '@/components/AddButton/AddButton.vue'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { type Button01ComponentMeta, JumpType, JumpTypeMap } from '@/definitions/type'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { removeItem, sortItem } from '@/utils/helper'
import { buildShortUUID } from '@/utils/uuid'
import { Input, InputNumber, Popconfirm, RadioButton, RadioGroup, Slider } from 'ant-design-vue'
import { ref } from 'vue'

defineOptions({
  name: 'Button01Attr',
  inheritAttrs: true,
})

const { activeRender } = useCompStyle<Button01ComponentMeta>()
const MAX_ITEMS = 2
const PRESET_COLORS = {
  left: 'linear-gradient(90deg, #FE8207 0%, #F40 100%)',
  right: 'linear-gradient(92deg, #909090 6.82%, #7A7A7A 98.05%)',
}
function createButton01Item(): Button01Item {
  const len = activeRender.value!.config.items!.length
  return {
    id: buildShortUUID(),
    text: '',
    color: len > 0 ? PRESET_COLORS.right : PRESET_COLORS.left,
    textRules: {
      min: 2,
      required: true,
    },
    colorRules: {
      min: 4,
      required: true,
    },
    radius: 24,
    jumpType: JumpType.None as any,
    radiusPc: 68,
  }
}
function handleAddItem() {
  if (!activeRender.value)
    return
  if (activeRender.value.config.items!.length >= MAX_ITEMS)
    return
  activeRender.value.config.items!.push(createButton01Item())
}
function handleRemoveItem(item: Button01Item) {
  if (!activeRender.value)
    return
  removeItem(activeRender.value.config.items!, l => l.id === item.id)
}
function handleSort(item: Button01Item, type: 'up' | 'down') {
  sortItem(activeRender.value!.config.items!, l => l.id === item.id, type)
}
const relatedItem = ref<Nullable<Button01Item['id']>>(null)
const { JumpLinkModalRef } = useCompRefs()
function handleChooseJumpLink(item: Button01Item) {
  if (JumpLinkModalRef.value) {
    relatedItem.value = item.id
    const { jumpType, jumpTitle, jumpUrl, jumpValue } = item
    JumpLinkModalRef.value.open({
      jumpType,
      jumpTitle,
      jumpUrl,
      jumpValue,
    }, chooseJumpCallback)
  }
}
function handleRemoveItemJumpLink(item: Button01Item) {
  item.jumpType = JumpType.None as any
  item.jumpTitle = ''
  item.jumpUrl = ''
  item.jumpValue = ''
}
function chooseJumpCallback(meta: OpenCallbackMeta) {
  if (activeRender.value && meta.applied && relatedItem.value) {
    const index = activeRender.value.config.items!.findIndex(l => l.id === relatedItem.value)
    if (~index) {
      activeRender.value.config.items![index] = {
        ...activeRender.value.config.items![index],
        ...meta.value,
      }
    }
  }
  relatedItem.value = null
}
function handleResetColor(item: Button01Item, index: number) {
  item.color = index > 0 ? PRESET_COLORS.right : PRESET_COLORS.left
}
</script>

<template>
  <div v-if="activeRender">
    <div class="setting-block">
      <div class="title-label">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="setting-block">
      <div class="title-label">
        组件内容
      </div>
      <!-- 按钮列表 -->
      <div class="flex flex-col w-full gap-3 mt-3">
        <!-- item for loop -->
        <div v-for="(item, index) in activeRender.config.items" :key="item.id" class="relative w-full pr-8">
          <!-- 灰色块 -->
          <div class="box-border w-full rounded bg-[#FAFAFF] p-14px">
            <div class="flex flex-row items-center gap-2">
              <div class="text-sm text-second-render flex-none">
                按钮文案
              </div>
              <Input
                v-model:value="item.text" placeholder="请输入按钮文案" class="flex-1"
                :min-length="item.textRules?.min" :max-length="item.textRules?.max"
                :required="item.textRules?.required"
              />
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                按钮颜色
              </div>
              <div class="flex-1 flex flex-row items-center gap-2">
                <div
                  class="flex-1 flex flex-row items-center gap-2 px-3 border border-solid border-[var(--app-color-border)] w-160px"
                >
                  <div
                    class="box-border w-4 h-4 flex-none"
                    :style="{ background: item.color }"
                  />
                  <Input
                    v-model:value="item.color" :bordered="false"
                    class="text-main-app !px-0" placeholder="#RRGGBB"
                  />
                </div>
                <span
                  class="cursor-pointer text-sm text-primary-app"
                  @click="handleResetColor(item, index)"
                >重置</span>
              </div>
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                圆角半径(移动)
              </div>
              <div class="flex-1 flex flex-row justify-end items-center">
                <Slider v-model:value="item.radius" :min="0" class="flex-1" />
                <InputNumber v-model:value="item.radius" :min="0" class="ml-4 flex-none" />
              </div>
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                圆角半径(PC)
              </div>
              <div class="flex-1 flex flex-row justify-end items-center">
                <Slider v-model:value="item.radiusPc" :min="0" class="flex-1" />
                <InputNumber v-model:value="item.radiusPc" :min="0" class="ml-4 flex-none" />
              </div>
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                按钮链接
              </div>
              <div class="box-border flex-1">
                <!-- CASE: 未选择链接 -->
                <div
                  v-if="(item.jumpType as any) === JumpType.None"
                  class="cursor-pointer text-primary-app text-sm flex items-center"
                  @click="handleChooseJumpLink(item)"
                >
                  选择跳转到的页面<i class="i-ant-design:right-outlined w-4 h-4 ml-1" />
                </div>
                <!-- CASE: 已选择链接 -->
                <div v-else class="flex-1 flex flex-row items-center">
                  <div class="flex-1 truncate text-main-app text-sm">
                    {{ JumpTypeMap.get(item.jumpType as any) }} | {{ item.jumpTitle }}
                  </div>
                  <i
                    class="i-ant-design:edit-outlined w-4 h-4 cursor-pointer text-primary-app flex-none"
                    @click="handleChooseJumpLink(item)"
                  />
                  <Popconfirm
                    ok-text="确定" cancel-text="取消" title="确定要删除该链接吗?" placement="left"
                    @confirm="handleRemoveItemJumpLink(item)"
                  >
                    <i
                      class="i-ant-design:delete-outlined w-4 h-4 cursor-pointer text-primary-app flex-none"
                    />
                  </Popconfirm>
                </div>
              </div>
            </div>
          </div>
          <!-- 灰色块操作 -->
          <BlockOpts
            :item="item" :disabled-up="index === 0"
            :disabled-down="index === activeRender.config.items!.length - 1" @remove="handleRemoveItem"
            @sort="handleSort"
          />
        </div>
      </div>
      <!-- 添加按钮 -->
      <AddButton v-if="(activeRender.config.items?.length || 0) < MAX_ITEMS" @click="handleAddItem">
        添加按钮
      </AddButton>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.setting-block {
    @apply mb-6;
}

.title-label {
    color: var(--app-text-color-main);
    margin-bottom: 14px;
    @apply text-sm font-700;
}
</style>
